<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>j</title>
  <link rel="stylesheet" href="css/1.css" type="text/css">

</head>
<body>
  <table class="a" border="1">
	  <tr class="b"><th colspan="5" style="font-size:24px; color: white; background-color: red;">购物清单</th></tr>
	<tbody>
	  <tr>
	  	<th>序号</th>
	    <th>商品</th>
	    <th>单价</th>
	    <th>数量</th>
	    <th>操作</th>
	  </tr>
	  <tr>
	  	<td>1</td>
	    <td>宝贝1</td>
	    <td>10</td>
	    <td>5</td>
	    <td>
	    	<button class="delItem">删除</button>
	    	<button class="tj">添加</button>
	    </td>

	  </tr>
       <tr>
       	<td>2</td>
	    <td>宝贝2</td>
	    <td>20</td>
	    <td>4</td>
	    <td>
	    	<button class="delItem">删除</button>
	    	<button class="tj">添加</button>
	    </td>

	  </tr>
	  <tr>
	  	<td>3</td>
	    <td>宝贝3</td>
	    <td>30</td>
	    <td>3</td>
	    <td>
	    	<button class="delItem">删除</button>
	    	<button class="tj">添加</button>
	    </td>

	  </tr>
	  <tr>
	  	<td>4</td>
	    <td>宝贝4</td>
	    <td>40</td>
	    <td>2</td>
	    <td>
	    	<button class="delItem">删除</button>
	    	<button class="tj">添加</button>
	    </td>
	  </tr>
	  <tr>
	    <tr>
	    <td>5</td>
	    <td>宝贝5</td>
	    <td>50</td>
	    <td>1</td>
	    <td>
	    	<button class="delItem">删除</button>
	    	<button class="tj">添加</button>
	    </td>
	  </tr>
	  <tr>
	  <td colspan="5">
      <p style="text-align:right;">汇总:<span id="zj" style="color: blue"></span>
      </p>
    </td>

	  </tr>
    </tbody>
  </table>
  <p><span  style="font-size: 38px;color: green"></span></p>

  <div class="shade" style="display:none;">
  	<div class="from-panel">
  		<h5 class="from-header">请输入表单信息<h5>
  		<div class="from-inner">
  			<input type="text" name="googs" value="" placeholder="请输入商品名称"><br>
  			<input type="text" name="price" value="" placeholder="请输入商品单价"><br>
  			<input type="text" name="num" value="" placeholder="请输入商品数量"><br>
       <div class="options">
           <button class="d">确定</button>
           <button class="e">取消</button>
        </div>
  </div>
          <div class="x">
          <em></em>
        </div>
  </div>
  </div>
   <script type="text/javascript" src="js/jquery-3.1.1.js"></script>
   <script type="text/javascript">
  /*定义一个统计函数*/
  var calcSum =  function(){
    var sum =0;
    $('tbody tr').each(function(){
      var price = $(this).find('td:eq(2)').text();
      var num = $(this).find('td:eq(3)').text();
      var total = price*num;
      sum +=total;
    })

    $('#sum').text(sum);
  };

  calcSum();
  
  $('tbody tr:odd').addClass('odd');

  /***/
  $('.tj').click(function(){
    $('.shade').show();
  });

  



  $('#e').click(function(){
    $('.shade').hide();
  })

  var showForm = function(){
    $('.shade').show();
  }



  $('.delItem').click(function(){
    /**删除行*/
    $(this).parent().parent().remove();
    /*调整一下奇偶的样式*/

    $('tbody tr').removeClass();
    $('tbody tr:odd').addClass('odd');

    /*调整每行的序号*/
    for(var i=0;i<$('tbody tr').length-1;i++){
      $('tbody tr:eq(' +i+')').find('td:first').text(i+1);
    }

    /**重新计算总和*/
    calcSum();

  })



  var delTr =  function(btn){

    $(btn).parent().parent().remove();

    calcSum();
  }
  /****/
  $('#addBtn').click(function(){
    var goodsname = $('input[name=goods]').val();
    var price = $('input[name=price]').val();
    var num =  $('input[name=num]').val();

    /**清空输入框**/
    $('input[name=goods]').val('');
    $('input[name=price]').val('');
    $('input[name=num]').val('');

    var ntr= $('tbody tr').length;
    var sn = $('tbody tr:eq('+(ntr-2)+')').find('td:first').text();


    /**把表单的值追加到表格的指定位置**/
    var tr = '<tr><td>'+(sn*1+1)+'</td><td>'+goodsname+'</td><td>'+price+'</td><td>'+num+'</td><td><button class="delItem" onclick="delTr(this)">删除</button>\
      <button onclick="showForm()">添加</button></td></tr>';

    /**往表格中插入一行*/
    $('tbody tr:eq('+(ntr-2)+')').after(tr);

    /**隐藏表单的输入层*/
    $('.shade').hide();

    calcSum();

  });



  $('.canclebtn').click(function(){
    $('.shade').hide();
  })


   </script>
</body>
</html>  